<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>成都生活美食展示</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/food_js.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.cxselect.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/comon0.css">
    <script>
        //这里代码多了几行，但是不会延迟显示，速度比较好，格式可以自定义，是理想的时间显示
        setInterval("fun(show_time)",1);
        function fun(timeID){
            var date = new Date();  //创建对象  
            var y = date.getFullYear();     //获取年份  
            var m =date.getMonth()+1;   //获取月份  返回0-11  
            var d = date.getDate(); // 获取日  
            var w = date.getDay();   //获取星期几  返回0-6   (0=星期天) 
            var ww = ' 星期'+'日一二三四五六'.charAt(new Date().getDay()) ;//星期几
            var h = date.getHours();  //时
            var minute = date.getMinutes()  //分
            var s = date.getSeconds(); //秒
            var sss = date.getMilliseconds() ; //毫秒
            if(m<10){
                m = "0"+m;
            }
            if(d<10){
                d = "0"+d;
            }
            if(h<10){
                h = "0"+h;
            }


            if(minute<10){
                minute = "0"+minute;
            }


            if(s<10){
                s = "0"+s;
            }


            if(sss<10){
                sss = "00"+sss;
            }else if(sss<100){
                sss = "0"+sss;
            }


            document.getElementById(timeID.id).innerHTML =  y+"-"+m+"-"+d+"   "+h+":"+minute+":"+s+"  "+ww;
//document.write(y+"-"+m+"-"+d+"   "+h+":"+minute+":"+s);  
        }
    </script>  
</head>
<body>
<div class="canvas">
    <iframe src="${pageContext.request.contextPath}/js/canvas.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
    <div class="loadbox"> <img src="${pageContext.request.contextPath}/images/loading.gif"> 页面加载中... </div>
</div>
<div class="tarBar" style="width: 100%;height: 7%;background-color:navy;z-index:10000000;position: sticky;flex-direction:row;position: -webkit-sticky; top: 0.1px; justify-items: right;font-size: 180%;  ">
    <div id="show_time" style="width: 40%;display: inline-block;color: gray;margin-left: 10px"></div>
    <a href="/food/show_food_page" style="margin-left: 25%;font-family:华文彩云,serif;font-weight:900">美食</a>
    <a href="/hospital/show_hospital_page"style="margin-left: 3%;font-family: 华文彩云,serif;font-weight: 900">医疗</a>
    <a href="/market/show_market_page"style="margin-left: 3%;font-family: 华文彩云,serif;font-weight: 900">购物</a>
    <a href="/user/loginpage"style="margin-left: 3%;font-family: 方正姚体,serif;font-weight: 300;font-size: smaller">退出登陆</a>
</div>
<div style="overflow: hidden;background:rgba(0,0,40,0) ; position: relative; z-index: 2;">

    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height:350px;">
                    <div class="alltitle">美食种类组成</div>
                    <div class="navboxall" id="echart1">

                    </div>
                </div>
                <div class="boxall" style="height:360px;">
                    <div class="alltitle">成都美食数据</div>
                    <div class="navboxall">

                        <div class="sycm">
                            <ul class="clearfix">
                                <li>
                                    <h2>${food_num}</h2>
                                    <span>商家数量</span>
                                </li>
                                <li>
                                    <h2>￥${food_average_money}</h2>
                                    <span>人均消费</span>
                                </li>
                                <li>
                                    <h2>${food_average_point}</h2>
                                    <span>平均评分</span>
                                </li>

                                <li>
                                    <h2>${food_type_num}</h2>
                                    <span>种类数量</span>
                                </li>
                                <li>
                                    <h2>${food_area_num}</h2>
                                    <span>包含地区</span>
                                </li>
                                <li>
                                    <h2>${food_hot_type}</h2>
                                    <span>最火类型</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </li>
            <li>
                <div class="boxall" style="height:100px">
                    <div class="navboxall"><h1>成都主城区美食大数据可视化展示平台</h1></div>
                </div>
                <div class="boxall" style="height:610px">

                    <div class="navboxall" style="overflow: hidden;height: 100%">
                        <div style="width: 120%; height: 120%; position: relative; left: -10%; top: -11%;" id="echart3">

                        </div>
                    </div>
                </div>

            </li>
            <li>
                <div class="boxall" style="height:350px">
                    <div class="alltitle">美食人气排行榜</div>
                    <div class="navboxall" style="overflow-y:scroll; height:300px">
                        <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tbody>
                            <tr>
                                <th scope="col">排名</th>
                                <th scope="col">名称</th>
                                <th scope="col">类型</th>
                                <th scope="col">人气</th>
                            </tr>
                            <c:forEach items="${foodPopularityRankList}" var="item" varStatus="v">
                                <tr>
                                    <td><span>${v.index+1}</span></td>
                                    <td>${item.name}</td>
                                    <td>${item.type}</td>
                                    <td>${item.popularity}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>

                    </div>
                </div>
                <div class="boxall" style="height: 360px">
                    <div class="alltitle">美食评分排行榜</div>
                    <div class="navboxall" style="overflow-y:scroll; height:310px">
                        <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tbody>
                            <tr>
                                <th scope="col">排名</th>
                                <th scope="col">名称</th>
                                <th scope="col">类型</th>
                                <th scope="col">评分</th>
                            </tr>
                            <c:forEach items="${foodPointRanks}" var="item" varStatus="v">
                                <tr>
                                    <td><span>${v.index+1}</span></td>
                                    <td>${item.name}</td>
                                    <td>${item.type}</td>
                                    <td>${item.point}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>

            </li>
        </ul>
        <ul class="clearfix">
            <li style="width:90%">
                <div class="boxall" style="height:300px;">
                    <div class="alltitle">美食种类对比</div>
                    <div class="navboxall " id="echart2">

                    </div>
                </div>
            </li>


        </ul>

    </div>
</div>
<script>
    $(function () {
        $('.wrap,.adduser').liMarquee({
            direction: 'up',
            runshort: false,
            scrollamount: 20
        });
    });

</script>

</body>
</html>
